<template>
  <u-navbar :leftIconSize="42" titleStyle="font-size:20px;font-weight:600" :autoBack="true" :placeholder='true'
            :title="data.navbarTitle||'新增提现账号'">
  </u-navbar>
  <view class="padding-30rpx">
    <view class="white-bg" style="padding: 0 15px; border-radius: 8px;">
      <u--form labelWidth="180" labelPosition="left" :model="data['form']" :rules="{}" ref="withdrawalRef">
        <u-form-item label="支付宝账号" prop="account" borderBottom class="form-item">
          <u--input placeholder="请输入支付宝账号" :maxlength="50" v-model="data['form'].account"
                    border="none"></u--input>
        </u-form-item>
        <u-form-item label="姓名" prop="name">
          <u--input type="" placeholder="请输入姓名" :maxlength="20" v-model="data['form'].name"
                    border="none" />
        </u-form-item>
      </u--form>
    </view>
  </view>
  <u-modal :show="data.modalShow" @cancel="data.modalShow=false" :showCancelButton="true" @confirm="confirmDelHandle"
           :title="data.modalTitle" :content='data.content'></u-modal>
  <view class="comfig-button flex-center">
    <u-button @click="saveHandle" :customStyle="{'width':'345px',margin:'0'}" type="primary" shape="circle"
              text="保存"></u-button>
    <u-button v-if="data.pageType=='update'"
              :customStyle="{'width':'345px',margin:'15px 0 0 0','background-color':'#EB5940'}" type="error"
              shape="circle" text="删除" @click="data.modalShow=true"></u-button>
  </view>
</template>

<script setup>
import { reactive} from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { isMobile } from '@/utils/check.js'
import {
  withdrawalAccountAddApi,
  withdrawalAccountDelApi,
  withdrawalAccountDetailApi,
  withdrawalAccountEditApi
} from './const'
const data = reactive({
  pageType: 'add',
  modalShow: false,
  modalTitle: '提示',
  content: '确定要删除该账号吗？',
  navbarTitle: '新增提现账号',
  form: {
    id: null,
    account: '',
    name: '',
  }
})
	onLoad((options) => {
		data.pageType = options.type || 'add'
		options.type === 'update' ? data.navbarTitle = '修改提现账号' : data.navbarTitle = '新增提现账号'
    if(options.type === 'update') {
      data['form'].id = options.id
      withdrawalAccountDetailApi(options.id).then((res) => {
        Object.keys(data.form).forEach((key) => { data.form[`${key}`] = res.data[`${key}`] })
      })
    }
	})

	const confirmDelHandle = () => {
    withdrawalAccountDelApi(data['form'].id).then((res) => {
      uni.showToast({ title: res.msg, duration: 1200, icon: "none" })
      data.modalShow = false
      goBack()
    })
	}
	const saveHandle = () => {
		if (!data.form.account) { uni.showToast({ title: '请输入支付宝账号', duration: 1200, icon: "none" }); return }
		if (!data.form.name) {
			uni.showToast({
				title: '请输入姓名',
				duration: 1200,
				icon: "none"
			});return}
    if(data.pageType === 'add') {
      data['form'].id = ''
      withdrawalAccountAddApi(data.form).then((res) => {
        uni.showToast({ title: res.msg, duration: 1200, icon: "none" })
        goBack()
      })
    } else if(data.pageType === 'update') {
      withdrawalAccountEditApi(data.form).then((res) => {
        uni.showToast({ title: res.msg, duration: 1200, icon: "none" })
        goBack()
      })
    }
	}
  const goBack = () => {
    setTimeout(() => {
      uni.navigateBack({
        delta: 1,
        success: function () {
          uni.$emit('getWithdrawalAccountList','edit')
        }
      })
    },500)


  }
</script>

<style lang="scss" scoped>
	.red-tip {
		color: #EB5940;
		padding: 14px 6px 0 0;
		font-size: 14px;
	}

	.comfig-button {
		position: fixed;
		width: 100%;
		display: flex;
		flex-direction: column;
		left: 0;
		bottom: 30px;
	}
  .form-item {
    position: relative;
    border-bottom: 1px solid rgba(0,0,0,0.1)
  }
</style>
